<template>
    <div class="comming">
        <div class="comming_title_h3 clearfix"><h3>近期最受期待</h3></div>
         <!-- swiper -->
        <swiper class="comming_con clearfix" :options="swiperOption">
            <swiper-slide class="comming_li" v-for="lunbo in lunboList" :key="lunbo.id">
                <!-- <div>{{lunbo.comingTitle}}</div> -->
                <div class="comming_img">
                    <div class="comming_img_img">
                        <img :src="picFix(lunbo.img)">
                    </div>
                    <div class="comming_img_text">
                        <div class="comming_xiangkan">{{lunbo.wish}}人想看</div>
                    </div>
                </div>
                <div class="comming_title">
                    <h3>{{lunbo.nm}}</h3>
                </div>
            </swiper-slide>
            
        </swiper>

        <div class="comming_list clearfix">
            <ul class="comming_list_ul">
                <li class="" v-for="(item,key) in fenzu" :key="item.id">
                    <div >{{key}}</div>
                    <div class=" " v-for='item2 in item' :key="item2.id">
                        <div >
                            <div class=""><img :src="picFix(item2.img)" alt=""></div>
                            <div class="">
                                <div class="">
                                    <h3> {{item2.nm}}</h3>
                                </div>
                                <div class="">想看人数{{item2.wish}}</div>
                                <div class="">主演：{{item2.star}}</div>
                                <div class="">{{item2.rt}} 上映</div>
                            </div>
                            <div class="">
                                <span>预售</span>
                             </div>
                        </div>
                    </div>
                </li>
                <li class="comming_list_li clearfix" v-for="movie in comingList" :key="movie.id">
                    <!-- <div class="movie_con clearfix">
                        <div class="movie_title_time clearfix">
                            <h2>{{movie.comingTitle}}</h2>
                        </div>
                        <div class="movie_wrapper clearfix">
                            <div class="movie_img clearfix"><img :src="picFix(movie.img)" alt=""></div>
                            <div class="movie_text_con clearfix">
                                <div class="movie_text_title clearfix">
                                    <h3> {{movie.nm}}</h3>
                                </div>
                                <div class="movie_text_xiangkan">想看人数{{movie.wish}}</div>
                                <div class="movie_text_actor">主演：{{movie.star}}</div>
                                <div class="movie_text_time">{{movie.rt}} 上映</div>
                            </div>
                            <div class="movie_text_btn">
                                <span>预售</span>
                             </div>
                        </div>
                    </div> -->
                    
                </li>
            </ul>
        </div>
    </div>
</template>



<script>

import '../scss/comming.scss' ;


export default {
    created() {
        //轮播图
        this.axios.get("/maoyan/ajax/mostExpected",{
            params:{
                ci: 20,
                limit: 10,
                offset: 0,
                token: ""
            }
        }).then((res)=>{
            console.log('轮播图数据',res.data.coming);
            this.lunboList = res.data.coming;
        })
        this.axios.get("/maoyan/ajax/comingList",{
        params:{
            ci: 20,
            token: '',
            limit: 10
            }
        }).then((res)=>{
            console.log('即将上映',res.data.coming);
            this.comingList = res.data.coming;
            // console.log('即将上映的电影',this.comingList);

            // 遍历数组
            this.comingList.forEach((item)=>{
                //如果没有，就变成一个数组作为新的分组
                if(!this.fenzu[item.comingTitle]){
                    this.fenzu[item.comingTitle] = []
                }
                //如果有，就继续添加到同一个数组
                this.fenzu[item.comingTitle].push(item)
                console.log('分组',this.fenzu);
            })

            //遍历数组所有的成员，以成员的某个数据作为分组的组名
            //在添加前，先判断对象上的属性(组名)是否存在，若不存在则设置一个空数组
            //将成员添加到对应的属性（组）上
            /* this.coming.forEach((item)=>{
                if(!this.fenzu[item.pingyin[0]]){
                    this.fenzu[item.comingTitle] = [];
                }
                this.fenzu[item.comingTitle].push(item);
            }) */
        })
    },
    data(){
        return {
             swiperOption: {
                slidesPerView: 4,
                spaceBetween: 30,
                // freeMode: true,
                // width:285,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                }
            },
            comingList:[],
            lunboList:[],

            // 分组
            fenzu:{
                /* 'b':[{name:'北京'},{}],
                't':[{},{name:'天津'}] */
            }
        }
    },
    methods: {
        picFix(url){
            if(typeof url == 'string'){
                return url.replace('w.h','85.157');
            }
        },
    },
}
</script>